﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <style>
        .navbar {
            display: none;
        }
    </style>
</head>

<body>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-block">
                <input type="text" name="txtname" lay-verify="required" placeholder="请输入" autocomplete="off"
                       class="layui-input">
                <span style="color:red" id="spname"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">父级菜单</label>
            <div class="layui-input-block">
                <select name="parentId" lay-filter="aihao">
                    <option value="0">顶级菜单</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">路径</label>
            <div class="layui-input-block">
                <input type="text" name="txturl"  placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
    <script>
        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            var layer = layui.layer;

            // 绑定父级菜单的方法
            function bindParentMenus() {
                $.ajax({
                    url: `@ViewBag.BaseUrl/T5/Menu/QueryMenu`,                    
                    type: "get",
                    dataType: "json",
                    success: function (res) {
                        if (res.code === 100) {
                            var parentMenuSelect = $("select[name='parentId']");
                            parentMenuSelect.empty();
                            parentMenuSelect.append('<option value="0">顶级菜单</option>');
                            $.each(res.data, function (index, item) {
                                parentMenuSelect.append('<option value="' + item.menuId + '">' + item.menuName + '</option>');
                            });
                            form.render('select');
                        } else {
                            layer.msg('获取父级菜单失败', { icon: 2 });
                        }
                    },
                    error: function () {
                        layer.msg('请求出错，请稍后重试', { icon: 2 });
                    }
                });
            }

            // 页面加载时调用绑定方法
            bindParentMenus();

            // 提交事件
            form.on('submit(demo1)', function (data) {
                var field = data.field; // 获取表单字段值
                // 显示填写结果，仅作演示用
                // layer.alert(JSON.stringify(field), {
                //     title: '当前填写的字段值'
                // });

                funadd();
                return false; // 阻止默认 form 跳转
            });

            function funadd() {
                // 创建一个空对象，用于存储表单数据
                var obj = {};
                // 获取菜单名称输入框的值，并存储到 obj 对象中
                obj.MenuName = $("input[name='txtname']").val();
                // 获取父级菜单选择框的值，并存储到 obj 对象中
                obj.ParentId = $("select[name='parentId']").val();
                // 获取路径输入框的值，并存储到 obj 对象中
                obj.MenuUrl = $("input[name='txturl']").val();

                // 检查菜单名称是否为空
                if (obj.MenuName === "") {
                    // 如果为空，在菜单名称输入框后面显示错误提示
                    $("#spname").text("菜单名不能为空");
                    return;
                } else {
                    // 如果不为空，清空错误提示
                    $("#spname").text("");
                }

                // 使用 jQuery 的 $.ajax 方法发送 POST 请求
                $.ajax({
                    // 请求的 URL
                    url: `@ViewBag.BaseUrl/T6/Menu/AddMenu`,                    
                    // 发送的数据，将对象转换为 JSON 字符串
                    data: JSON.stringify(obj),
                    // 请求类型
                    type: "post",
                    // 期望的数据类型
                    dataType: "json",
                    // 是否异步请求
                    async: false,
                    contentType: "application/json",
                    // 请求成功的回调函数
                    success: function (res) {
                        // 如果服务器返回的结果大于 0，表示添加成功
                        if (res.code == 100) {
                            alert('成功');
                            location.href = "/Menu/GetMune";
                        } else {
                            alert('失败');
                        }
                    },
                    // 请求出错的回调函数
                    error: function () {
                        alert('请求出错，请稍后重试');
                    }
                });
            }
        });
    </script>
</body>

</html>    